<template>
  <div>
    <!-- 
        放置在src目录下的图片资源有三种导入方式： 
            1、src的相对路径和@写法， 
               @表示src这一级目录
            2、import写法  
            3、require写法
            注意：F12观察下，编译后图片地址变化！！！
     -->
    <h1>关于图片</h1>
    <img src="../assets/logo.png" alt="" />
    <img src="@/assets/logo.png" alt="" />
    <!-- 拿不到 -->
    <!-- <img :src="src" alt="" /> -->
    <img :src="src1" alt="" />
    <img :src="src2" alt="" />
  </div>
</template> 
<script>
import src2 from "@/assets/logo.png";
export default {
  data() {
    return {
      // 拿不到
      src: "../assets/logo.png",
      src1: require("../assets/logo.png"),
      src2: src2,
    };
  },
};
</script>

<style>
</style>